The How it works in code form




















  "test_button@common.button": {
    "$pressed_button_name": "button.hotbar_inventory_button",
    "anchor_from": "center",
    "anchor_to": "center",
    "size": [ 16, 16 ],
    "layer": 3,
    "focus_enabled": false,
    "default_focus_precedence": 10,
    "button_mappings": [
      {
        "from_button_id": "button.menu_select",
        "to_button_id": "$pressed_button_name",
        "mapping_type": "pressed"
      }
    ]
  },










  "gtasa_hotbar_slot_selected_image": {
    "collection_index": "($index + 1)",
    "type": "image",
    "texture": "textures/ui/hud_selected_hotbar_slot",
    "color": [ 0.03, 0.03, 0.03 ],
    "size": [ 72, 72 ],
    "layer": 8,
    "bindings": [
      {
        "binding_type": "collection_details",
        "binding_collection_name": "$hotbar_collection_name",
        "binding_collection_prefix": "gtasa_hotbar_grid"
      },
      {
        "binding_name": "#slot_selected",
        "binding_name_override": "#visible",
        "binding_type": "collection",
        "binding_collection_name": "$hotbar_collection_name"
      }
    ]
  },

  "gtasa_hotbar_slot_selected_text": {
    "collection_index": "($index + 1)",
   "type": "label",
    "text": "(#ourtext + '%')",
    "color": [ 1.0, 0.333, 0.333 ],
    "size": [ 72, 72 ],
    "layer": 30,
    "bindings": [
      {
        "binding_type": "collection_details",
        "binding_collection_name": "$hotbar_collection_name",
        "binding_collection_prefix": "gtasa_hotbar_grid"
      },
      {
        "binding_name": "#item_durability_current_amount",
        "binding_name_override": "#ourtext",
        "binding_type": "collection",
        "binding_collection_name": "$hotbar_collection_name"
      }
    ]
  },


  "gtasa_gui_hotbar_grid_item": {
    "type": "panel",
    "layer": 1,
    "size": [ 72, 72 ],
    "anchor_to": "top_left",
    "anchor_from": "top_left",
    "$stack_count_required|default": true,
    "$durability_bar_required|default": true,
    "collection_index": "$index",
    "controls": [
      {
        "inv_next@test_button": {
          "$pressed_button_name": "button.hotbar_inventory_right",
          "size": [ 72, 72 ]
        } 
      },
      { "hotbar_slot_selected_image@gtasa_hotbar_slot_selected_image": {} },
      {
        "hotbar_parent": {
          "type": "panel",
          "size": [ 54, 54 ],
          "controls": [
            {
              "item_icon@hotbar_hud_item_icon": {
                "size": [ 45, 45 ]
              }
            },
            {
              "item_count@common.stack_count_label": {
                "size": [ 120, 60 ],
                "offset": [ -5, 40 ],
                "anchor_from": "bottom_right",
                "anchor_to": "bottom_right",
                "text_alignment": "right",
                "font_size": "large",
                "$item_collection_name": "$hotbar_collection_name",
                "$stack_count_collection_name": "$hotbar_collection_name",
                "bindings": [
                  {
                    "binding_name": "#inventory_stack_count",
                    "binding_type": "collection",
                    "binding_collection_name": "$stack_count_collection_name"
                  },
                  {
                    "binding_name": "#stack_count_visible",
                    "binding_name_override": "#visible",
                    "binding_type": "collection",
                    "binding_collection_name": "$stack_count_collection_name"
                  }
                ]
              }
            },
            {
              "item_dura@item_durability": {
                "$durability_bar_size|default": [ 40, 2 ],
                "$durability_bar_offset|default": [ 0, 28 ]
              } 
            }
          ]
        }
      }
    ],
    "bindings": [
      {
        "binding_type": "collection_details",
        "binding_collection_name": "$hotbar_collection_name",
        "binding_collection_prefix": "gtasa_hotbar_grid"
      },
      {
        "binding_name": "#slot_selected",
        "binding_name_override": "#visible",
        "binding_type": "collection",
        "binding_collection_name": "$hotbar_collection_name"
      },
      {
        "binding_name": "#item_id_aux",
        "binding_name_override": "#item_id_au",
        "binding_type": "collection",
        "binding_collection_name": "$hotbar_collection_name"
      }
    ]
  },


















  "gtasa_hotbar_grid": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ 72, 72 ],
    "$hotbar_collection_name|default": "hotbar_items",
    "collection_name": "$hotbar_collection_name",
    "controls": [
      {
        "0@gtasa_gui_hotbar_grid_item": {
          "$index": 0
        }
      },
      {
        "1@gtasa_gui_hotbar_grid_item": {
          "$index": 1
        }
      },
      {
        "2@gtasa_gui_hotbar_grid_item": {
          "$index": 2
        }
      },
      {
        "3@gtasa_gui_hotbar_grid_item": {
          "$index": 3
        }
      },
      {
        "4@gtasa_gui_hotbar_grid_item": {
          "$index": 4
        }
      },
      {
        "5@gtasa_gui_hotbar_grid_item": {
          "$index": 5
        }
      },
      {
        "6@gtasa_gui_hotbar_grid_item": {
          "$index": 6
        }
      },
      {
        "7@gtasa_gui_hotbar_grid_item": {
          "$index": 7
        }
      },
      {
        "8@gtasa_gui_hotbar_grid_item": {
          "$index": 8
        }
      }
    ]
  },



